<template>
  <div class="login">
    <div class="login-form">
      <h2>登录</h2>
      <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="loginForm"
        label-width="auto"
        label-position="left"
        class="demo-loginForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            type="username"
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model.number="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item label-width="80px">
          <el-button type="primary" @click="submitForm('loginForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from "@/api";
// 解密token
import jwtdecode from "jwt-decode";
export default {
  data() {
    // 用户名
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    // 密码
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          let res = await login(this.loginForm);
          if (res.status === 200) {
            // 解密token
            let token = jwtdecode(res.data);
            let obj = {
              username: token.username,
              token: res.data,
            };
            // 存vuex
            this.$store.commit("login/setUserInfo", obj);
            // 存本地（存字符串）
            localStorage.setItem("userInfo", JSON.stringify(obj));
            this.$message({
              type: "success",
              message: "登录成功",
            });
            this.$router.push("/");
          } else {
            this.$message({
              type: "error",
              message: "登录失败",
            });
          }
        } else {
          this.$message({
            type: "error",
            message: "用户名或密码不能为空！",
          });
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-form {
    width: 300px;
    padding: 20px 30px 10px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #606266;
    }
  }
}
</style>

<!-- <style>
.el-form-item__label {
  color: #fff !important;
}
</style> -->
